
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    
</body>
<script>


    const app = Vue.createApp({
        components: {
        },
        data(){
            return {
              count: 1,
              count2: 0,
              amount: 1.0,
              appendStr: 'aaaa'
            }
        },
        methods:{
            handlerAdd(param,param2){
                this.count+=param;
                this.count2+=param2;
            }
        },
        template:
        `
            <div>
                <div>父组件count：{{count}}</div>
                <div>父组件count2：{{count2}}</div>
                <div>父组件amount：{{amount}}</div>
                <div>父组件appendStr：{{appendStr}}</div>
                <counter v-model:appendContent="appendStr" v-model:price="amount" :count="count" @add-one="handlerAdd"/>
            </div>
        `
    });

    app.component('counter', {
        data(){
            return{
                num: this.count
            }
        },
        emits:['addOne','price'],
        // emits:{
        //     addOne: (p) => {
        //         return p<0 ? true: false;
        //     },
        //     price(){
        //         return true
        //     }
        // },
        props: {
            count:{
                type: String
            },
            price:{
                type: Number
            },
            appendContent:{
                type: String
            },
            modelModifiers:{
                default: () => ({})
            }

        },
        methods: {
           add(){
            console.log("this.modelModifiers.uppercase",this.modelModifiers);   
            let newValue = this.appendContent + "bdddd".toUpperCase();
               if(this.modelModifiers.uppercase){
                newValue = newValue.toUpperCase();
               }
                this.$emit("addOne", this.count+2, 100);
                this.$emit("update:appendContent", newValue);
           },
           caluAmount(){
            this.$emit("update:price", this.price + 10)
           }
        },
        template: 
        `
            <hr/>
            <div @click="add(),caluAmount()">{{num}} == {{price}}</div>
        `
    });

    const vm = app.mount("#root");
</script>
</html>